<template>
	<uv-popup ref="popupRef" mode="bottom" @maskClick="close" round="20" safe-area-inset-bottom @close="close">
		<view class="popup-container">
			<view class="popup-header">
				<uv-icon name="close" size="20" color="#f8f8f8" />
				<text class="popup-title">选择预约时间</text>
				<uv-icon name="close" size="20" @click="close" />
			</view>
			<view class="popup-body">
				<scroll-view scroll-y class="left-pane">
					<view
						v-for="(item, index) in dataSource"
						:key="index"
						class="left-item"
						:class="{ active: currentDayIndex === index }"
						@click="currentDayIndex = index">
						{{ item.label }}
					</view>
				</scroll-view>
				<scroll-view scroll-y class="right-pane" :scroll-into-view="scrollIntoViewId">
					<view
						v-for="(time, index) in dataSource[currentDayIndex]?.times || []"
						:key="index"
						class="right-item"
						:id="`time-${currentDayIndex}-${index}`"
						:class="{ selected: selectedTimeIndexForCurrentDay == index }"
						@click="selectTime(index)">
						<text>{{ time }}</text>
						<uv-icon
							v-if="selectedTimeIndexForCurrentDay == index"
							size="20"
							color="#b29060"
							name="checkmark-circle-fill"></uv-icon>
					</view>
				</scroll-view>
			</view>
		</view>
	</uv-popup>
</template>

<script setup>
	import { ref, watch, computed, nextTick } from 'vue'

	const props = defineProps({
		modelValue: Boolean, // 控制显示
		dataSource: {
			type: Array,
			default: () => [],
		},
		defaultValue: {
			type: Object,
			default: () => ({ dayIndex: 0, timeIndex: 0 }),
		},
	})

	const emit = defineEmits(['update:modelValue', 'confirm'])
	const scrollIntoViewId = ref('')
	const popupRef = ref(null)
	const currentDayIndex = ref(0)
	const currentTimeIndex = ref(0)
	const selectedTimeIndexes = ref([]) // 每个 dayIndex 的时间索引
	const selectedTimeIndexForCurrentDay = computed(() => {
		return selectedTimeIndexes.value[currentDayIndex.value] ?? -1
	})

	watch(
		() => props.modelValue,
		val => {
            scrollIntoViewId.value = ''
			if (val) {
				currentDayIndex.value = props.defaultValue.dayIndex || 0
				selectedTimeIndexes.value = props.dataSource.map((_, idx) =>
					idx === props.defaultValue.dayIndex ? props.defaultValue.timeIndex : -1
				)
				console.log(selectedTimeIndexes.value)
				console.log(123123)
				popupRef.value?.open()

				// 设置滚动目标ID
				setTimeout(() => {
					nextTick(() => {
						scrollIntoViewId.value = `time-${currentDayIndex.value}-${
							selectedTimeIndexes.value[currentDayIndex.value]
						}`
					})
				},0)
			} else {
				popupRef.value?.close()
			}
		},
		{ immediate: true }
	)

	function selectTime(index) {
		selectedTimeIndexes.value[currentDayIndex.value] = index
		const day = currentDayIndex.value
		emit('confirm', {
			dayIndex: day,
			timeIndex: index,
			label: props.dataSource[day].label,
			time: props.dataSource[day].times[index],
		})
		close()
	}

	function close() {
		emit('update:modelValue', false)
	}

</script>

<style scoped>
	.popup-container {
		background-color: #fff;
		border-radius: 20rpx 20rpx 0 0;
		height: 40vh;
		display: flex;
		flex-direction: column;
	}
	.popup-header {
		display: flex;
		padding: 20rpx 30rpx;
		justify-content: space-between;
		align-items: center;
		font-weight: bold;
		font-size: 34rpx;
		background-color: #f8f8f8;
		padding-bottom: 20rpx;
	}
	.popup-body {
		flex: 1;
		display: flex;
		overflow: hidden;
	}
	.left-pane {
		width: 300rpx;
		background-color: #f8f8f8;
	}
	.left-item {
		padding: 20rpx;
		text-align: center;
		color: #000;
	}
	.left-item.active {
		background-color: #fff;
		/* font-weight: bold; */
		color: #b29060;
	}
	.right-pane {
		flex: 1;
	}
	.right-item {
		padding: 20rpx;
		display: flex;
		font-size: 30rpx;
		justify-content: space-between;
		border-bottom: 1px solid #eee;
	}
	.right-item.selected {
		color: #b29060;
	}
</style>
